<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span class="span-top">
                {{$t('trstioncopdat')}}
                <el-date-picker :placeholder="$t('plsset')" v-model="tranctime" width="20%" type="daterange" :range-separator="$t('to')" :start-placeholder="$t('startdate')" :end-placeholder="$t('dateclosed')" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="mini"></el-date-picker>
                {{$t('transstatus')}}
                 <el-select v-model="selectParam.txStatus" :placeholder="$t('plsset')" size="mini">
                    <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                    <el-option :label="$t('succ')" value="SUCCESS"></el-option>
                    <el-option :label="$t('bindfailure')" value="FAIL"></el-option>
                    <el-option :label="$t('inprogress')" value="PROCESSING"></el-option>
                    <el-option :label="$t('entertained')" value="ACCEPTED"></el-option>
                    <el-option :label="$t('orderclosed')" value="CLOSED"></el-option>
                </el-select>
                {{$t('plaodrnum')}}
                <el-input v-model.trim="selectParam.payOrderNo" :placeholder="$t('plsipt')" class="jojono" size="mini"></el-input>
            </span>
            <span class="span-bottom">
                {{$t('mertnam')}}
                <el-input v-model.trim="selectParam.merName" :placeholder="$t('plsipt')" size="mini"></el-input>
                 {{$t('mertid')}}
                <el-input v-model.trim="selectParam.payeeId" :placeholder="$t('plsipt')" size="mini"></el-input>
            </span>
            <el-button type="primary" @click="seachTransList" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" row-key="index" :data="resultList">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="merTxTime" :label="$t('trscoptim')" width="170">
                </el-table-column>
                <el-table-column prop="totalAmount" :label="$t('trastamt')" width="100">
                </el-table-column>
                <el-table-column prop="tradeType" :label="$t('trstyp')" width="122">
                </el-table-column>
                <el-table-column prop="payeeName" :label="$t('mertnam')" width="160">
                </el-table-column>
                <el-table-column prop="payOrderNo" :label="$t('plaodrnum')" width="170">
                </el-table-column>
                <el-table-column prop="payeeId" :label="$t('mertid')" width="171">
                </el-table-column>
                <el-table-column prop="txStatus" :label="$t('sta')" width="80">
                </el-table-column>
                <el-table-column prop="payerId" :label="$t('payrid')" width="170">
                </el-table-column>
                <el-table-column prop="productCode" :label="$t('protnam')" width="180">
                </el-table-column>
                <el-table-column prop="merOrderNo" :label="$t('mertodrnum')" width="220">
                </el-table-column>
                <el-table-column :label="$t('opratn')" width="90" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="detail(scope.row)">{{$t('detls')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="selectParam.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="selectParam.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :pager-count="5">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {
    translist
} from '@/libs/reqlist.js'
import { getInitDate } from '@/libs/getDate.js'
export default {
    data() {
        return {
            isOk: false,
            total: 0,
            // 交易完成时间
            completeTime: '',
            today: '',
            // 开始结束时间构造
            start: '000000',
            end: '595959',
            // 查询列表参数
            selectParam: {
                merName: null,
                payerId: null,
                payeeId: null,
                startTime: null,
                endTime: null,
                txStatus: null,
                payOrderNo: null,
                merOrderNo: null,
                tradeType: null,
                pageSize: 10,
                pageNum: 1
            },
            resultList: [],
            result: {},
            tranctime: []
        }
    },
    methods: {
        seachTransList () {
            this.selectParam.pageNum = 1
            if (this.selectParam.payOrderNo === '') this.selectParam.payOrderNo = null
            if (this.selectParam.merName === '') this.selectParam.merName = null
            if (this.selectParam.payeeId === '') this.selectParam.payeeId = null
            // 构造交易开始时间、结束时间
            if (this.tranctime !== null) {
                this.selectParam.startTime = this.tranctime[0]
                this.selectParam.endTime = this.tranctime[1]
            }
            if (!this.tranctime) {
                this.selectParam.startTime = null
                this.selectParam.endTime = null
            }
            this.getTransList()
        },
         // 监听页面展示数据条数变化
        handleSizeChange (newSize) {
            this.selectParam.pageSize = newSize
            this.getTransList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.selectParam.pageNum = newNum
            this.getTransList()
        },
        // 获取交易列表
        getTransList() {
            translist(JSON.stringify(this.selectParam)).then(res => {
                if (res.data.code === '000000') {
                    this.total = res.data.data.total - 0
                    this.resultList = res.data.data.list
                        this.resultList.forEach((item, index) => {
                            if (item.tradeType === 'CONSUME') item.tradeType = this.$t('consumption')
                            if (item.tradeType === 'REFUND') item.tradeType = this.$t('refund')
                            if (item.txStatus === 'SUCCESS') item.txStatus = this.$t('succ')
                            if (item.txStatus === 'ACCEPTED') item.txStatus = this.$t('entertained')
                            if (item.txStatus === 'FAIL') item.txStatus = this.$t('bindfailure')
                            if (item.txStatus === 'CLOSED') item.txStatus = this.$t('orderclosed')
                            if (item.txStatus === 'PROCESSING') item.txStatus = this.$t('inprogress')
                            if (item.productCode === 'SCAN_PAY_CODE') item.productCode = this.$t('paymentbypaymentcode')
                            if (item.productCode === 'SCAN_REC_CODE') item.productCode = this.$t('paybycollectioncode')
                            if (item.productCode === 'SDK_CONSUME') item.productCode = this.$t('sdkconsump')
                            if (item.productCode === 'PLAT_CONSUME') item.productCode = this.$t('platformcon')
                            if (item.productCode === 'SETTLE_PAY') item.productCode = this.$t('settmoney')
                            item.merTxTime = item.merTxTime.substring(0, 4) + '-' + item.merTxTime.substring(4, 6) + '-' + item.merTxTime.substring(6, 8) + ' ' + item.merTxTime.substring(8, 10) + ':' + item.merTxTime.substring(10, 12) + ':' + item.merTxTime.substring(12, 14)
                        })
                }
            })
        },
        detail(data) {
            window.sessionStorage.setItem('payOrderNo', data.payOrderNo)
            window.sessionStorage.setItem('childOrd', JSON.stringify(data.items))
            this.$router.push('/sec/transManage/transDetail')
        }
    },
    mounted() {
        this.selectParam.startTime = getInitDate(7, 0)
        this.selectParam.endTime = getInitDate(0, 0)
        this.tranctime.push(this.selectParam.startTime)
        this.tranctime.push(this.selectParam.endTime)
        this.getTransList()
    }
}
</script>

<style lang="less" scoped>
@import './transRecords.less';
</style>
